<template>
  <div id="header">    
    <!-- <router-link :to="{path: '/frame/test'}">一个可以让main.vue路由的例子</router-link> -->
    <span class="info-span">通过vuex在组件间传递信息：{{ clickCount }}</span>
    <el-button type="warning" @click="sayToFrame">传递信息到父组件</el-button>
    <span class="welcome-span">
      您好，{{loginUser.userName}}[{{arg}}]
      <a class="def-link" href="#" @click="logout">注销</a>
    </span>    
  </div>
</template>

<script>
import qs from 'qs'
import {NO_ERROR} from '../../constant.js'
import { mapGetters } from 'vuex';

/* clientIp信息完全可以从localStorage里获得，
 * 为了演示父子组件间传值，使用了props
*/
export default {
  name: 'Header',
  props: [
  	"arg"
  ],
  data () {
    return {
      loginUser: {}
    }
  },
  mounted () {
    this.loginUser = JSON.parse(localStorage.getItem('loginUser'))
  },
  computed: {
    clickCount () {
      return this.getClickCount()
    }
  },
  methods: {
    ...mapGetters([
  		"getClickCount"
  	]),
    sayToFrame () {
      let now = new Date()
      let time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds()
      
      this.$emit("say", time)
    },
    logout () {     
      this.$axios.post('/logout', qs.stringify({
          userId: this.loginUser.userId
        })
      )
      .then(res => {
        if (res.data && res.data.code === NO_ERROR) {
          this.$alert(res.data.data, '提示', {
            // confirmButtonText: '确定',
            callback: action => {
              localStorage.removeItem('loginUser')
              localStorage.removeItem('token') 
              this.$router.push('/login')
            }
          })     
        }
    	})
    	.catch(console.log)
    }
  },
}
</script>

<style lang="stylus" scoped>
#header
  height 100%
  background-color #e3f9fd
  .info-span
    color red
    font-weight bold
    display inline-block
    margin 15px 40px 10px 20px
    white-space nowrap
  .welcome-span
    // background-color pink
    display inline-block
    width 100%
    text-align right
    vertical-align bottom
    position absolute
    bottom 10px
    right 20px
    font-size 11pt
    color #003371
    .def-link
      margin-left 10px
      text-decoration underline
      &:hover
        cursor pointer
      
</style>
